<template>
  <view class="profile-container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <image :src="userInfo.avatar" class="avatar" mode="aspectFill" />
      <view class="info-box">
        <text class="nickname">{{ userInfo.nickname }}</text>
        <view class="meta-box">
          <text class="meta-item">ID: {{ userInfo.id || '暂无' }}</text>
          <text class="meta-item">注册于{{ userInfo.registerDate }}</text>
        </view>
      </view>
      <button v-if="!isLogin" class="login-btn" @click="goLogin">点击登录</button>
    </view>

    <!-- 数据概览 -->
    <view class="stats-card">
      <view 
        class="stat-item"
        v-for="(item, index) in stats"
        :key="index"
        @click="navTo(item.path)"
      >
        <text class="num">{{ item.value }}</text>
        <text class="label">{{ item.label }}</text>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-grid">
      <view 
        class="menu-item"
        v-for="(item, index) in menus"
        :key="index"
        @click="handleMenu(item)"
      >
        <view class="icon-box" :style="{ backgroundColor: item.bgColor }">
          <text class="icon">{{ item.icon }}</text>
        </view>
        <text class="title">{{ item.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      userInfo: {
        avatar: '/static/avatar-default.png',
        nickname: '未登录用户',
        id: '2024001',
        registerDate: '2023-01-01',
        postCount: 0,
        likes: 0,
        collection: 0
      },
      stats: [
        { label: '帖子', value: 0, path: '/pages/profile/posts' },
        { label: '获赞', value: 0, path: '/pages/profile/likes' },
        { label: '收藏', value: 0, path: '/pages/profile/collections' }
      ],
      menus: [
        { 
          icon: '📝', 
          title: '我的申请', 
          path: '/pages/profile/applications',
          bgColor: '#5bc0eb'
        },
        { 
          icon: '🤖',
          title: 'AI分析',
          path: '/pages/ai-analysis/index',
          bgColor: '#4cd964'
        },
        { 
          icon: '❤️',
          title: '我的收藏',
          path: '/pages/profile/collections',
          bgColor: '#ff9500'
        },
        { 
          icon: '⚙️', 
          title: '账户设置', 
          path: '/pages/settings/set',
          bgColor: '#8e8e93'
        }
      ]
    }
  },
  onShow() {
    this.checkLoginStatus()
    this.loadUserInfo()
  },
  mounted() {
    uni.$on('user-logout', () => {
      this.userInfo = {
        avatar: '/static/avatar-default.png',
        nickname: '未登录用户',
        id: '2024001',
        registerDate: '2023-01-01',
        postCount: 0,
        likes: 0,
        collection: 0
      }
    })
  },
  methods: {
    checkLoginStatus() {
      this.isLogin = !!uni.getStorageSync('userInfo')
    },
    goLogin() {
      uni.navigateTo({ url: '/pages/login/index' })
    },
    async loadUserInfo() {
      if (!uni.getStorageSync('userInfo')) return
      // 这里添加获取用户信息的逻辑
      uni.showLoading({ title: '加载中...' })
      setTimeout(() => {
        this.userInfo = {
          avatar: '/static/avatar1.png',
          nickname: '技术达人',
          id: '2024001',
          registerDate: '2023-01-01',
          postCount: 12,
          likes: 456,
          collection: (uni.getStorageSync('collections') || []).length
        }
        uni.hideLoading()
      }, 500)
    },
    handleMenu(item) {
      if (item.path) {
        uni.navigateTo({
          url: item.path
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  padding: 30rpx;
  background: #f5f7fa;
  min-height: 100vh;
  
  .user-card {
    background: linear-gradient(135deg, #5bc0eb, #4fa8d3);
    border-radius: 24rpx;
    padding: 40rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 20rpx rgba(91, 192, 235, 0.3);
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 4rpx solid rgba(255,255,255,0.2);
      margin-right: 30rpx;
    }
    
    .info-box {
      flex: 1;
      
      .nickname {
        font-size: 36rpx;
        color: #fff;
        font-weight: 500;
        margin-bottom: 10rpx;
      }
      
      .meta-box {
        .meta-item {
          display: block;
          font-size: 24rpx;
          color: rgba(255,255,255,0.9);
        }
      }
    }
    
    .login-btn {
      background: rgba(255,255,255,0.2);
      color: #fff;
      border-radius: 40rpx;
      padding: 0 30rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 26rpx;
    }
  }

  .stats-card {
    background: #fff;
    border-radius: 24rpx;
    margin: 30rpx 0;
    padding: 30rpx 0;
    display: flex;
    box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
    
    .stat-item {
      flex: 1;
      text-align: center;
      
      .num {
        display: block;
        font-size: 36rpx;
        color: #5bc0eb;
        font-weight: 500;
        margin-bottom: 10rpx;
      }
      
      .label {
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  .menu-grid {
    background: #fff;
    border-radius: 24rpx;
    padding: 20rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
    
    .menu-item {
      padding: 30rpx;
      text-align: center;
      border-radius: 16rpx;
      transition: all 0.3s;
      
      &:active {
        background: #f5f5f5;
      }
      
      .icon-box {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20rpx;
        
        .icon {
          font-size: 44rpx;
        }
      }
      
      .title {
        font-size: 28rpx;
        color: #2c3e50;
      }
    }
  }
}
</style> 